<template>
  <!--订单付款-->
  <div>
    <!--倒计时-->
    <count-down ref="countDown"></count-down>
    <!--订单信息-->
    <el-table
        border
        :data="orderInfo"
        style="width: 100%">
      <el-table-column
          align="center"
          prop="movieName"
          label="影片">
      </el-table-column>
      <el-table-column
          align="center"
          prop="field"
          label="时间">
      </el-table-column>
      <el-table-column
          align="center"
          prop="cinemaName"
          label="影院">
      </el-table-column>
      <el-table-column
          align="center"
          prop="hall.name"
          label="影厅">
        <template slot-scope="scope">
          {{ String(scope.row.hall.name).split('<')[0] }}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="seat"
          label="座位">
      </el-table-column>
    </el-table>
    <!-- 支付金额 -->
    <div class="payment">
      <!--优惠劵抵用金额-->
      <div class="to-flex one-payment">
        <sn-text text="优惠劵抵用金额 :" :font-size="18" class="margin-right"/>
        <sn-text text="¥" font-color="#F76C6C" :font-size="18" class="margin-right"/>
        <sn-text :text="couponMoney" font-color="#F76C6C" :font-size="20" :move-down="-2"/>
      </div>
      <!--vip折扣-->
      <div class="to-flex one-payment">
        <sn-text text="vip折扣金额 :" :font-size="18" class="margin-right"/>
        <sn-text text="¥" font-color="#F76C6C" :font-size="18" class="margin-right"/>
        <sn-text :text="vipDiscountMoney" font-color="#F76C6C" :font-size="20" :move-down="-2"/>
      </div>
      <!--实际支付金额-->
      <div class="to-flex one-payment">
        <sn-text text="实际支付金额 :" :font-size="18" class="margin-right"/>
        <sn-text text="¥" font-color="#F76C6C" :font-size="18" class="margin-right"/>
        <sn-text :text="actualMoney" font-color="#F76C6C" :font-size="20" :move-down="-2"/>
      </div>
    </div>
    <el-button
        type="danger"
        round
        @click="toEnsurePay()"
        class="ensure-pay">确认支付
    </el-button>
  </div>
</template>
<script>
import CountDown from "@/components/common/sn/count_down/CountDown";

export default {
  name: "OrderPay",
  components: {
    CountDown
  },
  data() {
    return {
      couponMoney: 0,
      vipDiscountMoney: 0,
      actualMoney: 0,
      orderInfo: []
    }
  },
  mounted() {
    //开始倒计时
    this.beginCountDown()
  },
  created() {
    this.getOrderInfo()
  },
  methods: {
    //开始倒计时
    beginCountDown() {
      let countDown = this.$refs.countDown
      countDown.add()
    },
    //获取订单信息
    getOrderInfo() {
      let {movieName, field, cinemaName, tickets, hall, coupon, totalPrice} = this.$store.getters.getOrderInfo

      //获取订单项
      for (let i = 0; i < tickets.length; i++) {
        let orderInfo = {
          movieName, field, cinemaName, hall,
          seat: tickets[i].des
        }
        this.orderInfo.push(orderInfo)
      }
      //获取优惠劵金额
      this.couponMoney = coupon.amount
      //获取折扣金额
      let user = this.$store.getters.getUser
      let discount = user.discount
      let discountMoney = (totalPrice - Number(totalPrice * discount / 10)).toFixed(2)
      this.vipDiscountMoney = discountMoney
      //获取实际支付金额
      this.actualMoney = Number(totalPrice - discountMoney - coupon.amount).toFixed(2)
      //将实际支付金额保存到vuex中
      this.$store.commit(this.mutationsTypes.EXCHANGE_ACTUAL_MONEY, '')
      this.$store.commit(this.mutationsTypes.EXCHANGE_ACTUAL_MONEY, this.actualMoney)
    },
    toEnsurePay() {
      this.$router.push({
        name: 'ensurePay'
      })
    }
  },
}
</script>

<style scoped>
.order-step {
  margin-top: 80px;
  margin-bottom: 50px;
}

.payment {
  margin-top: 50px;
  margin-right: 50px;
}

.one-payment {
  margin-top: 10px;
}

.ensure-pay {
  margin-top: 20px;
  width: 200px;
  float: right;
  position: relative;
  bottom: 85px;
}
</style>
